<template>
  <div class="loginView">
    <header>
      <div class="back" @click="back">
        <van-icon name="cross" size="22" color="black" />
      </div>
    </header>
    <div class="titleBox">
      <div class="title">登录后更精彩</div>
      <div class="sub">与百万创作人一起成长</div>
    </div>
    <div class="index">
      <div class="input">
        <van-field
          v-model="tel"
          colon
          border
          type="tel"
          label="手机号"
          placeholder="请输入手机号"
          label-width="50px"
        />
      </div>
      <!-- <div class="input">
        <van-field
          v-model="password"
          colon
          border
          type="password"
          label="密码"
          placeholder="请输入密码"
          label-width="50px"
        />
      </div> -->
      <van-button
        type="danger"
        plain
        round
        block
        text="登录"
        @click="login"
      ></van-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "LoginView",
  data() {
    return {
      nsMine: {
        id: 13525021,
        url: "newstudios://app.xinpianchang.com/user/13525021",
        web_url: "https://www.xinpianchang.com/u13525021",
        username: "手机用户2172",
        avatar: "https://cs.xinpianchang.com/passport/default.jpg",
        about: "",
        verify_description: "",
        sex: 0,
        is_vmovier_migrate_user: false,
        is_stock_creator: false,
        is_edu_supplier: false,
        vip_flag: 0,
        count: {
          count_followee: 8,
          count_follower: 0,
          count_collected: 3,
          count_article_viewed: 0,
          count_liked: 0,
          count_article: 0,
          count_popularity: 1,
          count_public_folder: 0,
        },
        is_administrator: false,
        is_realname_auth: false,
        author_type: 0,
        addtime: 1676971805,
        user_groups: ["UC001"],
        realnameStatus: 0,
        realnameType: 0,
        is_freelancer: false,
        private_letter_permission: 1,
        app_background: "",
        is_hide_followers_list: false,
        is_hide_fans_list: false,
        birthday: "",
        entry_year: "",
        graduation: "",
        ip_location: "广东",
        share_info: {
          url: "https://www.xinpianchang.com/u13525021",
          title: "手机用户2172的个人主页 | 来自新片场",
          image: "https://cs.xinpianchang.com/passport/default.jpg",
          description: "新片场，与百万创作人一起成长",
        },
        vip_status: 0,
      },
      tel: "",
      fromPath: "",
      //   password: "",
    };
  },
  computed: {
    isPhone: function () {
      let regx = /^1[34578]\d{9}$/;
      return regx.test(this.tel);
    },
  },
  methods: {
    back() {
      this.$router.replace({ path: this.fromPath });
    },
    login() {
      if (!this.tel) {
        this.$toast("请输入电话号码");
      } else {
        if (!this.isPhone) {
          this.$toast("请输入正确的电话号码");
        } else {
          this.nsMine.username = `手机用户${this.tel.substr(
            this.tel.length - 4,
            4
          )}`;
          localStorage.setItem("nsMine", JSON.stringify(this.nsMine));
          // this.back();
          this.$router.replace({ path: this.fromPath });
        }
      }
    },
  },
  beforeRouteEnter(to, from, next) {
    // console.log(from);
    next((vm) => {
      vm.fromPath = from.fullPath;
      next();
    });
  },
};
</script>

<style lang="scss" scoped>
.loginView {
  height: 100vh;
  background-image: url(https://t7.baidu.com/it/u=161363929,737086920&fm=193);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center 154px;

  header {
    padding: 0 15px;
    height: 50px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    // .back {
    //   margin-left: 15px;
    // }
  }

  .titleBox {
    display: flex;
    flex-direction: column;
    margin-bottom: 40px;
    padding: 0 15px;

    .title {
      font-size: 36px;
      font-weight: bold;
      margin-bottom: 8px;
    }

    .sub {
      color: #999;
      font-size: 16px;
      font-weight: bold;
    }
  }

  .index {
    padding: 0 30px;
    display: flex;
    flex-direction: column;
    margin-bottom: 146px;

    .input {
      width: 100%;
      border: 1px solid black;
      margin-bottom: 10px;
      border-radius: 22px;
    }

    :deep(.van-cell) {
      border-radius: 22px;
    }

    :deep(.van-button__text) {
      font-size: 20px;
    }
  }
}
</style>
